<template>
	<div class="white-box">
		<div class="table-mb">
			<el-button type="primary" @click="handleAdd">添加版本</el-button>
		</div>

		<el-table class="table-mb" v-loading="loading" :data="arr_data" :header-cell-style="{ background: '#F5F7FA' }"
			element-loading-background="rgba(255, 255, 255, 0.6)" @selection-change="handleAllSelected">
			<!-- <el-table-column type="selection" width="55" /> -->
			<el-table-column prop="name" label="版本"> </el-table-column>
			<el-table-column prop="path" label="下载链接" min-width="400"> </el-table-column>
			<el-table-column prop="create_time" label="创建时间"> </el-table-column>
		</el-table>

		<el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
			:total="totalNums" layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>



		<el-dialog v-model="dialogClass" title="APP版本" width="560px" :append-to-body="true" :destroy-on-close="true"
			:close-on-click-modal="false" @close="closeAddClass">
			<el-form ref="ruleClassRef" :model="ruleClassForm" :rules="ruleCheckClass" label-width="120px">

				<el-form-item label="版本号" prop="version" required>
					<el-input v-model.trim="ruleClassForm.version" clearable placeholder="请输入版本号" />
				</el-form-item>
				<el-form-item label="APP" prop="img" required>
					<el-upload ref="uploadFileRef" :show-file-list="false" action="admin/upload/file"
						:on-change="fileChange" :multiple="upload_batch" :auto-upload="false" :limit="1"
						style="margin-right: 12px">
						<el-button type="success" size="small">上传APP</el-button>
					</el-upload>
				</el-form-item>
				<!-- <el-form-item>
					<div class="flexs" style="margin-top: 30px">
						<el-button type="primary" :loading="form_loading" @click="submitClassForm(ruleClassRef)">
							确认
						</el-button>
						<el-button @click="resetClassForm(ruleClassRef)">重置</el-button>
					</div>
				</el-form-item> -->
			</el-form>
		</el-dialog>

		<!-- 图片库 -->
		<picture-library :show="showImg" @close="showImg = false" @select="selectImg"> </picture-library>

		<go-back />
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		reactive,
		onMounted,
		watch
	} from "vue"
	import OneLoad from "@mixins/one-load"
	import {
		useRouter
	} from "vue-router"
	import {
		Search,
		UploadFilled,
		CloseBold
	} from "@element-plus/icons-vue"
	import GoBack from "@components/GoBack.vue"
	import draggable from "vuedraggable"
	import PictureLibrary from "@components/PictureLibrary.vue"

	const router = useRouter()
	const {
		proxy
	} = getCurrentInstance()

	onMounted(() => {
		getList()
	})
	/**
	 * minxin列表加载
	 */
	const {
		page,
		pageSizeNum,
		pageSize,
		loading,
		arr_data,
		totalNums,
		search_text,
		search_btn,
		pubParams,
		pubRefreshParams,
		getdata
	} = OneLoad()

	const imageUrl = ref("")
	/**
	 * 添加/编辑
	 * @property {Boolean} dialogClass 添加/编辑弹窗状态
	 * @property {Boolean} form_loading 提交按钮状态
	 * @property {Number} classType 弹窗类型，1是添加，2是编辑
	 * @property {Array} ruleClassRef 表单规则
	 * @property {Object} ruleClassForm  表单字段
	 * @property {Object} ruleCheckClass  表单提示
	 * @property {Function} submitClassForm 提交表单
	 * @property {Function} addClass 添加分类
	 * @property {Function} closeAddClass 关闭弹窗
	 */
	const dialogClass = ref(false)
	const form_loading = ref(false)
	const classType = ref(1)
	const ruleClassRef = ref(null)
	const ruleClassForm = reactive({
		name: "",
		img: "",
		srcList: [],
		market_id: "",
		action: 1,
		is_enable: 1, //1正常，2禁用
		sort: 0
	})
	const ruleCheckClass = reactive({
		name: [{
			required: true,
			message: "请输入姓名",
			trigger: "blur"
		}],
		img: [{
			required: true,
			message: "请上传图片",
			trigger: "blur"
		}],
		market_id: [{
			required: true,
			message: "请选择菜市场",
			trigger: "blur"
		}],
	})

	// 切换每页显示条数
	watch(pageSize, (val) => {
		page.value = 1
		pubParams(getList)
	})
	// 跳转第几页
	watch(page, (val) => {
		pubParams(getList)
	})
	const handleSearch = () => {
		search_btn.value = true
		pubRefreshParams(getList)
	}


	const market_id = ref('')

	function getList() {
		let params = {
			page: page.value,
			limit: pageSize.value
		}
		getdata("admin/upload/list", params)
	}

	const handleAdd = () => {
		dialogClass.value = true
		classType.value = 1
	}
	const handleEdit = (row) => {
		dialogClass.value = true
		classType.value = 2
		setTimeout(() => {
			ruleClassForm.name = row.name
			ruleClassForm.market_id = row.market_id
			ruleClassForm.img = row.img
			ruleClassForm.srcList.push(proxy.imgUrl + row.img)
			ruleClassForm.id = row.id
			ruleClassForm.action = row.action
			ruleClassForm.sort = ruleClassForm.sort
		}, 50)
	}
	const resetClassForm = (formEl) => {
		if (!formEl) return
		ruleClassForm.srcList = []
		formEl.resetFields()
	}
	const closeAddClass = () => {
		dialogClass.value = false
		resetClassForm(ruleClassRef.value)
	}
	const submitClassForm = (formEl) => {
		if (!formEl) return
		formEl.validate((valid, fields) => {
			if (valid) {
				form_loading.value = true
				// let names = proxy.$util.replaceStr(ruleClassForm.name)
				let data = {}
				data.img = ruleClassForm.img
				data.name = ruleClassForm.name
				data.market_id = ruleClassForm.market_id
				data.is_enable = ruleClassForm.is_enable
				data.action = ruleClassForm.action
				data.sort = ruleClassForm.sort
				if (classType.value == 2) {
					data.id = ruleClassForm.id
				}

				let url = classType.value == 1 ? "admin/store/type/store" : "admin/store/type/save"
				proxy.$axios
					.post(url, data)
					.then((res) => {
						form_loading.value = false
						if (res.data.code == 0) {
							dialogClass.value = false
							proxy.$message({
								message: `${classType.value == 1 ? "添加成功！" : "编辑成功！"}`,
								type: "success"
							})
							pubParams(getList)
						} else {
							proxy.$message({
								message: res.data.msg,
								type: "error"
							})
						}
					})
					.catch((err) => {
						form_loading.value = false
					})
			}
		})
	}
	 const fileList = ref([])
	 const imgLoading=ref(false)
	function fileChange(file, fileArr) {
		imgLoading.value = true
		let data = new FormData()
		data.append("version", ruleClassForm.version)
		data.append("name", ruleClassForm.version)
		data.append("file", fileArr[0].raw)
		proxy.$axios.post("admin/upload/file", data).then((res) => {
			fileList.value = []
			imgLoading.value = false
			if (res.data.code == 0) {
				dialogClass.value = false
				pubParams(getList)
			} else {
				proxy.$message({
					message: res.data.msg,
					type: "error"
				})
			}
		}).catch(err => {
			imgLoading.value = false
		})
	}
</script>

<style lang="less" scoped>
	.good-logo {
		width: 60px;
		height: 60px;
		border-radius: 60px;
	}
</style>